<template>
  <div class="i_bg">
    <div class="content mar_20">
      <img src="@/assets/images/img2.jpg" />
    </div>

    <!--Begin 第二步：确认订单信息 Begin -->
    <div class="content mar_20">
      <div class="two_bg">
        <div class="two_t">商品列表</div>
        <table
          border="0"
          class="car_tab"
          style="width: 1200px; margin-bottom: 50px; text-align: left"
          cellspacing="0"
          cellpadding="0"
        >
          <tr>
            <td class="car_th" width="40%">商品名称</td>
            <td class="car_th" width="30%">购买数量</td>
            <td class="car_th" width="30%">小计</td>
            <!-- <td class="car_th" width="150">操作</td> -->
          </tr>
          <template v-if="order != null && order.orderDetailList">
            <tr
              v-for="orderDetail in order.orderDetailList"
              :key="orderDetail.productId"
            >
              <td style="font-size: 1rem">
                <div class="c_s_img">
                  <img
                    :src="imagesDir + orderDetail.fileName"
                    width="73"
                    height="73"
                  />
                </div>
                {{ orderDetail.name }}
              </td>
              <td align="center" style="font-size: 0.9rem">
                {{orderDetail.quantity}}
              <td align="center" style="color: #ff4e00">
                ￥{{ orderDetail.cost * orderDetail.quantity }}
              </td>
            </tr>
          </template>
          <tr>
            <td colspan="4">
              <el-empty
                v-if="
                  order == null ||
                  order.orderDetailList == null ||
                  order.cost <= 0
                "
                description="空空如也，赶紧去购买商品吧~"
              ></el-empty>
            </td>
          </tr>
          <tr>
            <td align="right" colspan="3">
              <span style="font-size: 1rem">商品总价：</span
              ><span style="color: red; font-size: 2rem"
                >￥{{ order.cost }}</span
              >
            </td>
          </tr>
          <!-- <tr valign="top" height="150">
            <td colspan="4" align="right">
              <router-link :to="{ name: 'GoodsList' }"
                ><img src="@/assets/images/buy1.gif" /></router-link
              >&nbsp; &nbsp;
              <a href="#"><img src="@/assets/images/buy2.gif" /></a>
            </td>
          </tr> -->
        </table>

        <!-- 查看address -->
        <div class="two_t">
          <span class="fr"><a href="javascript:;" @click="addressListShow = true">修改</a></span
          >收货人信息
        </div>
        <div v-if="!addressList || addressList.length == 0" style="text-align: center; font-size: 1rem; font-family:'宋体';height: 10rem;padding:2rem">
          <span>暂无收货人地址，赶紧去<router-link :to="{name: 'AddressList'}" style="color:blue">创建</router-link>一个</span>
        </div>
        <table
          v-if="addressList && addressList.length > 0 && address"
          border="0"
          class="peo_tab"
          style="width: 1110px;text-align: center"
          cellspacing="0"
          cellpadding="0"
        >
          <tr>
            <td class="p_td" width="20%">用户姓名</td>
            <td width="80%">{{address.addressName}}</td>
          </tr>
          <tr>
            <td class="p_td" width="20%">手机/电话</td>
            <td width="80%">{{address.mobile}}</td>
          </tr>
          <tr>
            <td class="p_td" width="20%">详细地址</td>
            <td width="80%">{{address.address}}</td>
          </tr>
         
        </table>


        <!-- 修改地址对话框 -->

        <!-- <el-dialog title="收货地址" :visible.sync="addressListShow">
          <el-form :model="form">
            <el-form-item label="选择地址">
              <el-radio-group v-model="address" size="medium">
                <el-radio border v-for="addr in addressList" :key="addr.id" label="`用户地址：${addr.address} - 用户名：${addr.addressName} - 手机号：${}`"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addressListShow = false">取 消</el-button>
            <el-button type="primary" @click="addressListShow = false">确 定</el-button>
          </div>
        </el-dialog> -->
        <el-dialog title="选择收货地址" :visible.sync="addressListShow" width="600px">
        <el-form :model="form">
          <el-form-item label="选择地址">
            <el-radio-group v-model="selectedAddressId">
              <div v-for="addr in addressList" :key="addr.id" class="address-option">
                <el-radio :label="addr.id" class="address-radio">
                  <div class="address-info">
                    <div class="address-header">
                      <span v-if="addr.isDefault === 1" class="default-tag">默认</span>
                      <strong>{{ addr.addressName }}</strong>
                      <span class="mobile">{{ addr.mobile }}</span>
                    </div>
                    <div class="address-detail">
                      {{ addr.address }} {{ addr.detail }}
                    </div>
                    <div v-if="addr.remark" class="address-remark">
                      备注：{{ addr.remark }}
                    </div>
                  </div>
                </el-radio>
              </div>
            </el-radio-group>
            
            <div v-if="!addressList || addressList.length === 0" class="empty-address">
              <i class="el-icon-location-outline"></i>
              <p>暂无收货地址，请先添加地址</p>
            </div>
          </el-form-item>
        </el-form>
        
        <div slot="footer" class="dialog-footer">
          <el-button @click="addressListShow = false">取 消</el-button>
          <el-button type="primary" @click="confirmAddress">确 定</el-button>
        </div>
      </el-dialog>
        <!-- <div class="two_t">支付方式</div>
        <ul class="pay">
          <li>
            微信支付 
          </li>
          <li>
            支付宝
            <div class="ch_img"></div>
          </li>
        </ul>
 -->
        <table>
          <tr height="70">
            <td align="right">
              <b style="font-size: 14px"
                >应付款金额：<span style="font-size: 22px; color: #ff4e00"
                  >￥{{order.cost}}</span
                ></b
              >
            </td>
          </tr>
          <tr height="70">
            <td align="right">
              <!-- <router-link :to="{name: 'OrderPay', query: {payStatus: 1}}"><img src="@/assets/images/btn_sure.gif" /></router-link> -->
              <a href="javascript:;" @click.once="submitOrder()"><img src="@/assets/images/btn_sure.gif" /></a>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <!--End 第二步：确认订单信息 End-->
  </div>
</template>

<script>
import Vue from "vue";
import { Empty } from "element-ui";
Vue.use(Empty);
export default {
  data() {
    return {
      order: null,
      loginName: sessionStorage.getItem("loginName"),
      imagesDir: sessionStorage.getItem("imagesDir"),
      userId: null,
      addressList: null,
      address: null,
      selectedAddressId: null, // 选中的地址ID
      form: {},
      addressListShow: false,
    };
  },
  methods: {
    submitOrder() {
      if(!this.address) {
        this.$message.warning("用户地址不能为空！");
        return;
      }
      //完善订单
      this.order.addressId = this.address.id;
      this.order.loginName = this.loginName;
      this.order.userAddress = this.address.address;
      this.$axios({
        //生成订单
        url: '/api/order/submit',
        method: 'post',
        data: this.order
      }).then(() => {
        this.$router.push({
          name: 'OrderPay'
        })
      })
    },
    getUserId() {
        this.$http
        .post(
          "/api/address/getUserId",
          "token=" + sessionStorage.getItem("token")
        )
        .then((res) => {
          this.userId = res.data.userId;
          this.getAllAddress();
        });
    },
    getAllAddress() {
      this.$axios({
        //生成订单
        url: '/api/address/list',
        method: 'post',
        data: {
          userId: this.userId,
        }
      }).then(rs => {
        console.log("所有地址查询结果：", rs);
        this.addressList = rs.data
        if(this.addressList.length > 0) this.address = this.addressList[0];
      })
    },
    // 打开地址选择对话框
    openAddressDialog() {
      this.addressListShow = true;
      this.selectedAddressId = null;
      this.loadAddressList();
    },
    // 确认选择地址
    confirmAddress() {
      if (!this.selectedAddressId) {
        this.$message.warning("请选择一个收货地址");
        return;
      }
      // 获取选中的地址对象
      this.address = this.addressList.find(addr => addr.id === this.selectedAddressId);
      this.addressListShow = false;
      this.$message.success("地址选择成功");
    }
  
  },
  watch: {
    order: {
      deep: true,
      handler(newOrder) {
        this.$store.commit("setOrder", newOrder);
      },
    },
  },
  created() {
    let type = sessionStorage.getItem("type");
    if(!type) {
      this.$message.error("权限不足，将回到首页！")
      this.$router.push({
        name: 'IndexCenter'
      })
      return;
    }
    this.order = this.$store.state.order;
    
    this.getUserId();
  },
};
</script>

<style>
.address-option {
  margin-bottom: 10px;
}

.address-radio {
  width: 100%;
  padding: 10px;
  margin: 0 !important;
}

.address-info {
  margin-left: 10px;
}

.address-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.default-tag {
  background: #e6f7ff;
  color: #1890ff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  margin-right: 8px;
}

.mobile {
  margin-left: auto;
  color: #666;
}

.address-detail {
  color: #333;
  line-height: 1.5;
}

.address-remark {
  color: #999;
  font-size: 12px;
  margin-top: 3px;
}

.empty-address {
  text-align: center;
  padding: 20px;
  color: #999;
}

.empty-address i {
  font-size: 40px;
  margin-bottom: 10px;
}
</style>